<template>
  <div>
    <h1>readonly的使用</h1>
    <h1 v-text="user2.a"></h1>
    <button @click="add">+1</button>
  </div>
</template>

<script setup>
// readonly:只读的，不能修改的
import { isRef, reactive, readonly, isReadonly, ref, isReactive } from "vue";

// obj是一个普通对象
let obj = { a: 1, b: 2 };
// user是一个reactive对象
let user = reactive(obj);

// info是一个readonly对象
let info = readonly({ c: 3, d: 4 });
// user2也是一个readonly对象，也是一个reactive
let user2 = readonly(user);

// foo是一个ref对象
let foo = ref(100);
// foo2是一个readmonly
let foo2 = readonly(foo);

let xx = 666;

let add = () => {
  user2.a++;
};
console.log(isReadonly(info)); // true
console.log(isReadonly(user2)); // true
console.log(isReadonly(foo2)); // true
console.log("---------");
console.log(isReadonly(foo));
console.log(isReadonly(user));
console.log(isReadonly(user));
console.log("---------");
console.log(isReactive(obj));
console.log(isReactive(user));
console.log(isReactive(info));
console.log(isReactive(user2));
console.log("---------");
console.log(isRef(foo2));
</script>

<style lang="scss" scoped>
</style>